<template>
  <a-form layout="inline" name="dynamic_form_nest_item" class="w-full children:w-full overflow-hidden pt-2">
    <a-row :gutter="[0, 16]" align="middle">
      <a-col v-for="(item, index) in dynamicForm" :key="item.id" :span="item.span">
        <component
          :is="`Edit${capitalize(item.type)}`"
          :item="item"
          @update:item="Object.assign(item, $event)"
          @remove="removeQueryItem(index)"
        ></component>
      </a-col>
      <a-form-item>
        <a-dropdown :trigger="['click']">
          <a-button type="dashed" block>
            <PlusOutlined />
          </a-button>
          <template #overlay>
            <a-menu @click="onSelectQueryItem">
              <a-menu-item key="input">输入框</a-menu-item>
              <a-menu-item key="select">下拉框</a-menu-item>
              <a-menu-item key="range">时间选择器</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-form-item>
      <a-form-item>
        <a-button type="dashed" block> 查询 </a-button>
      </a-form-item>
      <a-form-item>
        <a-button type="primary">提交</a-button>
      </a-form-item>
    </a-row>
  </a-form>
</template>

<script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue'
import type { MenuClickEventHandler } from 'ant-design-vue/es/menu/src/interface'
import { EditItemType } from '@/form'
import { Editable } from '@/form'
import { createFormItemUtils } from '@/utils/create'
import { capitalize } from '@/utils/tool'

const dynamicForm = reactive<Editable<EditItemType>[]>([createFormItemUtils.createInput()])

const onSelectQueryItem: MenuClickEventHandler = ({ key }) => {
  // prettier-ignore
  dynamicForm.push(createFormItemUtils[`create${capitalize(key as string)}`]())
}

const removeQueryItem = (index: number) => {
  dynamicForm.splice(index, 1)
}
</script>

<style scoped></style>
